<html>
<head>
<title>X</title>

<style type="text/css">
body {
	margin: 0px;
}
svg {
	position: absolute;
}
</style>

<script type="text/javascript">
var SVG = "http://www.w3.org/2000/svg";
var XLINK = "http://www.w3.org/1999/xlink";

function buildCircle(cx, cy, r, style) {
	var c = document.createElementNS (SVG, "circle");
	c.setAttributeNS (null, 'cx', cx);
	c.setAttributeNS (null, 'cy', cy);
	c.setAttributeNS (null, 'r', r);
	c.setAttributeNS (null, 'style', style);
	return c;
}

window.onload = function() {
	var x = document.createElement("div");
	x.innerHTML = "xxx";
	document.body.appendChild(x);

	buildPlanet();
}

function buildPlanet() {
	var x = document.createElement("div");

	var svgElem = document.createElementNS (SVG, "svg");
//	svgElem.setAttributeNS (null, 'width', 256);
//	svgElem.setAttributeNS (null, 'height', 256);
	svgElem.setAttributeNS (null, 'viewBox', "-103 -103 206 206");

	var g = document.createElementNS (SVG, "g");
	g.appendChild(buildCircle(0, 0, 100, "fill: red"));

	svgElem.appendChild(g);
//	svgElem.appendChild(buildCircle(0, 0, 100, "fill: transparent; stroke: black; stroke-width: 2"));

//	var svgContainer = document.getElementById ("svgContainer");
//	document.body.appendChild (svgElem);

	x.appendChild(svgElem);
	document.body.appendChild(x);
}

</script>
</head>
<body>

</body>
</html>